<template>
  <div>
    <div class="addkill2">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="排序">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="选择商品">
          <div class="xuanz" @click="dialogTableVisible = true">选择商品</div>
        </el-form-item>
        <el-form-item label="所属会场">
          <el-select v-model="form.region">
            <el-option label="极致睿成秒杀" value="shanghai"></el-option>
            <el-option label="乔治王子城" value="beijing"></el-option>
            <el-option label="大大泡泡糖" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.region2">
            <el-option label="中药" value="shanghai"></el-option>
            <el-option label="西药" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原价">
          <el-input
            v-model="input1"
            size="mini"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input
            v-model="input2"
            size="mini"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>返回列表</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择商品模态框 -->
    <el-dialog title="请选择药品" :visible.sync="dialogTableVisible">
      <!-- 搜索 -->
      <div class="search">
        <p>药品名称</p>
        <div class="search_box">
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
          ></el-input>
          <el-button
            slot="append"
            @click="sou"
            icon="el-icon-search"
          ></el-button>
        </div>
      </div>
      <!-- 商品 -->
      <p class="ming">已选中：{{ wei }}</p>

      <el-table :data="gridData" border>
        <el-table-column
          property="date"
          label="商品"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <img
              class="yao_img"
              src="http://127.0.0.1:7001/public/yao.png"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          property="name"
          label="名称"
          width="400"
          align="center"
        ></el-table-column>
        <el-table-column property="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleClick(scope.row)"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="el_btn">
        <el-button type="primary" @click="ming">确定</el-button>
        <el-button type="danger" @click="dialogTableVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { zqhzqhkill2add } from '../../api/index'
export default {
  data() {
    return {
      wei: '',
      input1: '',
      input2: '',
      input3: '',
      btn: true,
      form: {
        name: '',
        region: '极致睿成秒杀',
        region2: '中药',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      dialogTableVisible: false,
      gridData: [
        {
          name: '极致睿成秒杀',
          statue: false,
        },
        {
          name: '乔治王子城',
          statue: false,
        },
        {
          name: '大大泡泡糖',
          statue: false,
        },
      ],
    }
  },
  methods: {
    // 终于发布啦
    onSubmit() {
      if(this.form.name!=''&&this.wei!=''&&this.input1!=''&&this.input2!=''){
        zqhzqhkill2add({
        paixu: this.form.name,
        name: this.wei,
        ip: this.form.region,
        mai: `0/0/${this.input2}`,
        rmb: this.input1,
      }).then((res) => {
        console.log(res)
        if(res.code==200){
            this.$notify({
            title: '成功',
            message: '添加成功马上跳转',
            type: 'success',
          })
          setTimeout(()=>{
            this.$router.push('/seckill')
          },1000)
        }
      })
      }else{
        this.$notify({
          title: '警告',
          message: '请填写完成数据',
          type: 'warning',
        })
      }
    },
    // 搜索
    sou() {
      let a = this.gridData.filter((item) => {
        return item.name == this.input3
      })
      console.log(this.input3)
      this.gridData = a
    },
    // 选择商品
    handleClick(e) {
      this.wei = e.name
      console.log(this.wei)
    },
    // 确定商品
    ming() {
      if (this.wei != '') {
        this.dialogTableVisible = false

      } else {
        this.$notify({
          title: '警告',
          message: '请选择添加的药名',
          type: 'warning',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.addkill2 {
  width: 1000px;
  margin: 50px 0 0 30px;
}
.yao_img {
  width: 50px;
  height: 50px;
}
.xuanz {
  width: 910px;
  height: 40px;
  text-align: right;
  padding-right: 10px;
  color: white;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(187, 187, 187, 1);
}
.ming {
  height: 30px;
}
.el_btn {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
}
.search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30px;
}
.search_box {
  width: 550px;
  display: flex;
}
</style>
